<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传下载服务</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <style>
        .progress {
            height: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        .progress-bar {
            height: 100%;
            background-color: #007bff;
            transition: width 0.3s ease;
        }
        .progress-text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-weight: bold;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="my-4">文件上传下载服务</h1>

    <form id="uploadForm" class="form-inline mb-4">
        <div class="form-group mr-2">
            <input type="file" name="file" id="fileInput" class="form-control">
        </div>
        <input type="submit" value="上传" class="btn btn-primary">
    </form>

    <div class="progress mb-4" id="progressContainer" style="display: none;">
        <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        <span id="progressText" class="progress-text">0%</span>
    </div>

    <h2>文件列表</h2>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文件名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{range .Files}}
        <tr>
            <td>{{.}}</td>
            <td>
                <div class="row">
                    <div class="col-sm-4">
                        <a href="/upload/{{.}}" class="btn btn-sm btn-success">下载</a>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" value="/upload/{{.}}" class="form-control form-control-sm" readonly>
                    </div>
                    <div class="col-sm-4">
                        <form class="deleteForm" method="POST" action="/delete">
                            <input type="hidden" name="filename" value="{{.}}">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定删除 {{.}} 吗？');">删除</button>
                        </form>
                    </div>
                </div>
            </td>
        </tr>
        {{end}}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('uploadForm').addEventListener('submit', function(event) {
        event.preventDefault();

        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var progressBar = document.getElementById('progressBar');
        var progressText = document.getElementById('progressText');
        var progressContainer = document.getElementById('progressContainer');

        if (!file) {
            alert('请选择一个文件');
            return;
        }

        progressContainer.style.display = 'block';
        progressBar.style.width = '0%';
        progressBar.setAttribute('aria-valuenow', 0);
        progressText.textContent = '0%';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);

        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var percentComplete = (event.loaded / event.total) * 100;
                progressBar.style.width = percentComplete + '%';
                progressBar.setAttribute('aria-valuenow', percentComplete);
                progressText.textContent = Math.round(percentComplete) + '%';
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                alert('上传失败');
            }
        };

        var formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    });
</script>
</body>
</html>